<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->
<div class="row-fluid sortable ui-sortable">
  <div class="box span12">
    <div class="box-header">
      <h2 openlmis-message="report.title.issue.voucher.medical.supply"><i class="icon-edit"></i><span
          class="break"></span></h2>

      <div class="box-icon">
        <a ng-click="section(0)" ng-show="show(1)" class="btn-minimize"><i class="icon-chevron-up"></i></a>
        <a ng-click="section(1)" ng-show="show(0)" class="btn-minimize"><i class="icon-chevron-down"></i></a>
        <a id="pdf-button" ng-show="filterForm.$valid" href="" ng-click="exportReport('PDF')"
           class='btn-small btn-info'><span openlmis-message="label.pdf"></span></a>
        <a id="xls-button" ng-show="filterForm.$valid" href="" ng-click="exportReport('XLS')"
           class='btn-small btn-info'><span openlmis-message="label.excel"></span></a>
      </div>
    </div>

    <div>
      <div class="row-fluid">

        <div class="sidebar">
          <div class="app-form" style="padding: 5px;">
            <form ng-submit="filterGrid()" name="filterForm" novalidate>
              <div filter-container class="clearfix">

                <div class="form-cell horizontalFilters">
                  <label class="labels">Order Type<span
                      class="label-required">*</span> </label>

                  <select ui-select2 style="width:200px;" name="orderType" ng-change="filterChanged();" ng-model="orderType"
                          ng-options="option.name as option.value for option in orderTypes">

                  </select>
                </div>
                <program-filter class="form-cell horizontalFilters" required="true"></program-filter>
                <schedule-filter class="form-cell horizontalFilters" required="true"></schedule-filter>
                <year-filter class="form-cell horizontalFilters" required="true"></year-filter>
                <period-filter class="form-cell horizontalFilters" required="true"></period-filter>
                <zone-filter class="form-cell horizontalFilters"></zone-filter>
                <facility-type-filter class="form-cell horizontalFilters"></facility-type-filter>
                <facility-filter required="true" class="form-cell horizontalFilters"></facility-filter>
              </div>
            </form>
          </div>
        </div>
        <div class="content-body">
          <table client-side-sort-pagination class="table table-bordered ng-table-responsive" ng-show="data == undefined || data.length == 0">
            <tr>
              <td>No data to show under selected filters</td>
            </tr>
          </table>

          <div ng-show="datarows.length > 0">

            <div class="pull-right legend">Page: {{tableParams.page}}, Showing records {{ ((tableParams.page - 1) *
              tableParams.count) + 1 }} to {{ (tableParams.page ) * tableParams.count }} of {{tableParams.total}}
              <br/>
                        <span ng-repeat="summary in summaries">
                             <span class="report-label">{{summary.name}}</span> : <span class="report-data">{{summary.count}}</span>
                         </span>
            </div>
            <table ng-show="datarows.length > 0" class="table-bordered table table-striped" ng-table="tableParams">

              <tbody>
              <tr ng-repeat="row in datarows">
                <td data-title="'#'" class="number" style="width:20px">{{ row.no }}</td>
                <td data-title="getLocalMessage('label.product.code')" style="width:150px" sortable="productCode">{{
                  row.productCode }}
                </td>
                <td data-title="getLocalMessage('label.description')" style="width:30%" sortable="description">{{
                  row.description }}
                </td>
                <td data-title="getLocalMessage('label.facility.name')" style="width:30%" sortable="facilityName">{{
                  row.facilityName }}
                </td>
                <td data-title="getLocalMessage('label.product.packSize')" class="number" style="width:80px"
                    sortable="packSize">{{ row.packSize | number }}
                </td>
                <td data-title="getLocalMessage('headers.packs.to.ship')" class="number" style="width:80px"
                    sortable="packsToShip">{{ row.packsToShip | number }}
                </td>
                <td data-title="getLocalMessage('label.discrepancy.or.damages')" class="number" style="width:80px"
                    sortable="orderQuantity">{{row.discrepancy }}
                </td>
              </tr>
              </tbody>
            </table>
          </div>

        </div>
      </div>

    </div>


  </div>
</div>
